// 和用户管理有关的功能

// 引入二级路由的模板

import usersView from '@/users.ejs';

// 引入 api模块
import axios from '../api/index.js';

export default function (router) {
	router.route('/admin/users', (req, res) => {
		res.render(usersView());
		// 点击添加用户
		// 一、点击按钮的时候 显示添加用户的对话框
		let addUserBtn = document.querySelector('.adduer');

		// 获取添加的对话框
		let adduermodelEle = document.querySelector('.adduermodel');
		// 遮罩层元素
		let maskEle = document.querySelector('.mask');

		addUserBtn.onclick = function () {
			console.log('点击了');
			// 点击添加按钮的时候  让对话框和 遮罩层显示出来
			adduermodelEle.style.display = 'block';
			maskEle.style.display = 'block';
		};

		// 二 点击 关闭的时候 关闭 对话框
		let closebtnEle = document.querySelector('.closebtn');

		closebtnEle.onclick = function () {
			adduermodelEle.style.display = 'none';
			maskEle.style.display = 'none';
		};

		// 三 点击 提交按钮的时候  提交用户的信息 到后端。
		let imgFileEle = document.querySelector('.imgFile');
		let imgshowEle = document.querySelector('.imgshow');

		imgFileEle.onchange = function () {
			// input 发生改变的时候触发函数；
			console.log('发生改变了!!');
			// 获取上传的图片对象
			// 通过 input.files
			// console.log(this.files[0])
			let imgObj = this.files[0];
			let filerader = new FileReader();
			filerader.readAsDataURL(imgObj); // 把图片对象转成url形式的数据，base64格式
			// 需要在filerader读完数据之后 获取base64
			filerader.onload = function () {
				// 读取完毕了，获取base64字符串
				console.log(filerader.result);
				let myimg = new Image(); // 创建一个img 标签
				myimg.src = filerader.result; // 设置图片的路径地址是获取到的base64的路径
				myimg.style.width = '100px';
				myimg.style.height = '100px';
				// 把图片的对象添加到html里
				imgshowEle.innerHTML = ''; // 请求显示的div里的内容
				imgshowEle.appendChild(myimg);
			};
		};

		// 点击提交按钮的时候 发送ajax
		let submitBtn = document.querySelector('.btn');
		let usernameEle = document.querySelector('.username');
		let pwdEle = document.querySelector('.pwd');
		let repeatpwdEle = document.querySelector('.repeatpwd');
		submitBtn.onclick = async function () {
			// 发送ajax 测试
			// 获取用户名和密码
			let username = usernameEle.value;
			let pwd = pwdEle.value;
			let repeatpwd = repeatpwdEle.value;
			// 获取文件对象
			let imgfile = imgFileEle.files[0]; // 文件对象

			// 表单的校验
			if (username == '') {
				return alert('用户名不能为空');
			}

			if (pwd == '') {
				return alert('密码不能为空');
			}

			// 两次输入的密码要一致
			if (pwd !== repeatpwd) {
				return alert('两次输入的密码不同');
			}

			// 文件不能是undefined
			if (typeof imgfile == 'undefined') {
				return alert('图像不能为空');
			}

			console.log(username, pwd, imgfile);

			// 借助 FormData 预定义类
			let form = new FormData(); // 模拟一个空的form表单
			form.append('username', username);
			form.append('pwd', pwd);
			form.append('myimg', imgfile);
			// console.log(form);
			// 把form当成数据直接提交给后端 ，自动设置请求头部信息
			let { data } = await axios.post('/user/adduser', form);
			if (data.status == 1) {
				// 需要把对话框隐藏起来
				alert('添加成功');
				adduermodelEle.style.display = 'none';
				maskEle.style.display = 'none';
			}

			//     console.log("点击了提交按钮");
			//   let res = await axios.get("/user/getdata");
			//   console.log(res);
		};
	});
}
